<template>
	<!-- 菜品规格弹窗 -->
	<view class="specification">
		<u-popup :show="show" mode="center" :round="15" @close="specClose" closeable=true>
			<view class="foodSpec">
				<text class="specTitle">{{specData[0].tasteName}}</text>
				<view class="spec">
					<view style="font-size: 30rpx;color:#9C9C9C">规格: </view>
					<u-button v-for="(item, index) in specData" :key="item.id"
						type="primary" 
						:text="item.size"
						:plain="true"
						@click="chooseSpec(item, index)"
						:color="currentPlain === index ? '#FFA500' : '#E8E8E8'"
						:customStyle="{
							'width': '22%', 
							'height': '50rpx', 
							'display': 'inline-block',
							'margin': '20rpx 10rpx',
							'color': '#000',
							'line-height': '45rpx',
							'padding': '5rpx'
						}">
					</u-button>
				</view>
				<view class="chossedSpec">
					<view style="font-size: 23rpx;color: #9C9C9C;">已选规格：
						<text style="font-weight: bold; color: #000; font-size: 30rpx">{{specData[currentPlain].size}}</text>
					</view>
					<view class="total">
						<view class="price">
							<text>单价</text>
							<text style="color: #CD0000;">￥{{ specData[currentPlain].price }}</text>
							<text style="font-size: 20rpx;color: #CFCFCF;margin-left: 10rpx;">￥{{ specData[currentPlain].price }}</text>
						</view>
						<view class="calculate" v-if="specData[currentPlain].num">
							<u-icon name="minus-circle" color="#FFA500" size="22" @click="subtractNum"></u-icon>
							<text style="margin: 10rpx;">{{ specData[currentPlain].num }}</text>
							<u-icon name="plus-circle-fill" color="#FFA500" size="22" @click="plusNum"></u-icon>
						</view>
						<u-button
							v-else
							type="primary"
							size="mini"
							text="加入购物车"
							color="#FFA500"
							:customStyle="{
								'width': '30%', 
								'height': '40rpx', 
								'border-radius': '50rpx',
								'display': 'inline-block',
								'color': '#000',
								'line-height': '40rpx'
							}"
							@click="plusFood">
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { foodSpecification } from '@/common/http.api.js'
	import store from '@/store/index.js'
	export default {
		props: {
			show: Boolean,
			specData: Array,
			currentFood: Object
		},
		data() {
			return {
				foodSpecificationData: [],
				currentPlain: 0,
				shopData: this.$store.state.shopData,
				showIcon: false
			}
		},
		methods: {
			specClose(){
				this.$emit('update:show', false)
			},
			chooseSpec(item, index){
				this.currentPlain = index
			},
			//加入购物车
			plusFood(){
				this.$emit('plusFood', this.currentFood, this.specData[this.currentPlain])
			},
			//加1
			plusNum(){
				// this.$emit('plusNum', this.currentFood)
				this.$emit('plusNum', this.currentFood, this.specData[this.currentPlain])
			},
			// //减1
			subtractNum(){
				// this.$emit('subtractNum', this.currentFood)
				this.$emit('subtractNum', this.currentFood, this.specData[this.currentPlain])
			},
		},
		computed: {
			foodData() {
				return this.currentFood
			}
		}
	}
</script>

<style lang="less" scoped>
	.specification{
		.foodSpec{
			padding: 5rpx;
			width: 500rpx;
			height: 400rpx;
			padding:0 30rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			.specTitle{
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				margin-top: 30rpx;
				// border-bottom: 1px solid #E8E8E8;
			}
			.spec{
				margin-top: 10rpx;
				flex: 1;
			}
			.chossedSpec{
				width: 100%;
				padding: 20rpx 0;
				line-height: 50rpx;
				.total{
					display: flex;
					justify-content: center;
					align-items: center;
					.price{
						flex: 1;
						font-size: 25rpx;
					}
					.calculate{
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
</style>
